import './MyList.scss'
import React, { Component } from 'react';
import logo from '../logo.svg'
class MyList extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex:0,
            // arr1:['活动专区','品牌','彩妆','香水','酒类','腕表首饰','服饰箱包','食品保健'],
            arr:[
                {
                    name:'活动专区',
                    list:[
                        {pic2:logo,type:'卸妆'},
                        {pic2:logo,type:'洁面/去角质'},
                        {pic2:logo,type:'爽肤水/喷雾'},
                        {pic2:logo,type:'乳液'},
                        {pic2:logo,type:'精华/精油'},
                        {pic2:logo,type:'面霜'},
                        {pic2:logo,type:'面膜'},
                        {pic2:logo,type:'防晒隔离'},
                        {pic2:logo,type:'润唇膏/唇膜'},
                        {pic2:logo,type:'面部套装'},
                        {pic2:logo,type:'其他面部'},
                    ]
                },
                {
                    name:'品牌',
                    list:[
                        {pic2:logo,type:'防晒隔离'},
                        {pic2:logo,type:'防晒隔离/去角质'},
                        {pic2:logo,type:'防晒隔离/喷雾'},
                        {pic2:logo,type:'防晒隔离'},
                        {pic2:logo,type:'防晒隔离/精油'},
                        {pic2:logo,type:'防晒隔离'},
                        {pic2:logo,type:'防晒隔离'},
                        {pic2:logo,type:'防晒隔离'},
                        {pic2:logo,type:'防晒隔离/唇膜'},
                        {pic2:logo,type:'防晒隔离'},
                        {pic2:logo,type:'其他防晒隔离面部'},
                    ]
                },
                {
                    name:'彩妆',
                    list:[
                        {pic2:logo,type:'卸妆'},
                        {pic2:logo,type:'卸妆/去角质'},
                        {pic2:logo,type:'卸妆/喷雾'},
                        {pic2:logo,type:'卸妆'},
                        {pic2:logo,type:'卸妆/精油'},
                        {pic2:logo,type:'卸妆'},
                        {pic2:logo,type:'卸妆'},
                        {pic2:logo,type:'卸妆'},
                        {pic2:logo,type:'卸妆/唇膜'},
                        {pic2:logo,type:'卸妆'},
                        {pic2:logo,type:'卸妆'},
                    ]
                },
                {
                    name:'香水',
                    list:[
                        {pic2:logo,type:'卸妆'},
                        {pic2:logo,type:'洁面/去角质'},
                        {pic2:logo,type:'爽肤水/喷雾'},
                        {pic2:logo,type:'乳液'},
                        {pic2:logo,type:'精华/精油'},
                        {pic2:logo,type:'面霜'},
                        {pic2:logo,type:'面膜'},
                        {pic2:logo,type:'防晒隔离'},
                        {pic2:logo,type:'润唇膏/唇膜'},
                        {pic2:logo,type:'面部套装'},
                        {pic2:logo,type:'其他面部'},
                    ]
                },
                {
                    name:'酒类',
                    list:[
                        {pic2:logo,type:'卸妆'},
                        {pic2:logo,type:'洁面/去角质'},
                        {pic2:logo,type:'爽肤水/喷雾'},
                        {pic2:logo,type:'乳液'},
                        {pic2:logo,type:'精华/精油'},
                        {pic2:logo,type:'面霜'},
                        {pic2:logo,type:'面膜'},
                        {pic2:logo,type:'防晒隔离'},
                        {pic2:logo,type:'润唇膏/唇膜'},
                        {pic2:logo,type:'面部套装'},
                        {pic2:logo,type:'其他面部'},
                    ]
                },
                {
                    name:'腕表首饰',
                    list:[
                        {pic2:logo,type:'卸妆'},
                        {pic2:logo,type:'洁面/去角质'},
                        {pic2:logo,type:'爽肤水/喷雾'},
                        {pic2:logo,type:'乳液'},
                        {pic2:logo,type:'精华/精油'},
                        {pic2:logo,type:'面霜'},
                        {pic2:logo,type:'面膜'},
                        {pic2:logo,type:'防晒隔离'},
                        {pic2:logo,type:'润唇膏/唇膜'},
                        {pic2:logo,type:'面部套装'},
                        {pic2:logo,type:'其他面部'},
                    ]
                },
                {
                    name:'服饰箱包',
                    list:[
                        {pic2:logo,type:'卸妆'},
                        {pic2:logo,type:'洁面/去角质'},
                        {pic2:logo,type:'爽肤水/喷雾'},
                        {pic2:logo,type:'乳液'},
                        {pic2:logo,type:'精华/精油'},
                        {pic2:logo,type:'面霜'},
                        {pic2:logo,type:'面膜'},
                        {pic2:logo,type:'防晒隔离'},
                        {pic2:logo,type:'润唇膏/唇膜'},
                        {pic2:logo,type:'面部套装'},
                        {pic2:logo,type:'其他面部'},
                    ]
                },
                {
                    name:'食品保健',
                    list:[
                        {pic2:logo,type:'卸妆'},
                        {pic2:logo,type:'洁面/去角质'},
                        {pic2:logo,type:'爽肤水/喷雾'},
                        {pic2:logo,type:'乳液'},
                        {pic2:logo,type:'精华/精油'},
                        {pic2:logo,type:'面霜'},
                        {pic2:logo,type:'面膜'},
                        {pic2:logo,type:'防晒隔离'},
                        {pic2:logo,type:'润唇膏/唇膜'},
                        {pic2:logo,type:'面部套装'},
                        {pic2:logo,type:'其他面部'},
                    ]
                },
            ]
        }
    }
    handleClick(index){
        this.setState({
            currentIndex:index
        },()=>{
            console.log(this.state.currentIndex);
        })
    }
    render() {
        return (
            <div className='myList'>
                <div className='leftbox'>
                    {
                        this.state.arr.map((item,index)=>{
                            return (
                                <div className={`btn ${this.state.currentIndex == index ? 'active':''}`} key={index} onClick={ ()=>{
                                    this.handleClick(index)
                                }}>
                                <span></span>
                                <p>{item.name}</p>
                                </div>
                            )
                        })
                    }
                </div>
                <div className='rightbox'>
                    <div className='t'>
                        <p>面部护理</p>
                    </div>
                    <div className="b">
                        {
                            this.state.arr[this.state.currentIndex].list.map((item,index)=>{
                                return (
                                    <div className='content'>
                                    <img src={item.pic2} />
                                    <p>{item.type}</p>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default MyList;